<template>
  <div>
    <div class="center">
      <!-- 头部 -->
      <div class="table_header flex flex_bet flex-wrap">
        <div class="table_button">
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="toAddData">添加</el-button>
        </div>
        <div class="table_searchs flex">
          <div class="table_search flex">
            <el-input placeholder="搜索" v-model="searchInput" class="input-with-select" size="small">
              <el-select v-model="select" slot="prepend" placeholder="请选择" class="table_select" style="width:105px">
                <el-option label="归属" value="1"></el-option>
                <el-option label="sn第三四位" value="2"></el-option>
                <el-option label="批次" value="3"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="idnameSearch"></el-button>
            </el-input>
          </div>
          <dynamicTable :checkboxVal="checkboxVal" @alter="alterCheckbok" />
        </div>
      </div>
      <!-- table -->
      <el-table stripe style="width: 100%" :data="tableData" :key="key" border fit highlight-current-row ref="tableDataRef">
        <el-table-column v-if="colData[0].istrue" min-width="50" align="center" prop="id" label="ID"></el-table-column>
        <el-table-column v-if="colData[1].istrue" min-width="120" align="center" prop="admin_name" label="归属"></el-table-column>
        <el-table-column v-if="colData[2].istrue" min-width="120" align="center" prop="nameCode" label="型号"></el-table-column>
        <el-table-column v-if="colData[3].istrue"  min-width="100" align="center" prop="batch" label="分发批次">
          <template slot-scope="scope">
            <p v-for="(item,index) in scope.row.batch" :key="item.id" style="margin: 0;padding: 0">{{item.batch}}</p>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[4].istrue"  min-width="100" align="center" prop="batch" label="设定">
          <template slot-scope="scope">
            <p v-if="scope.row.status==1">系统休眠期开启wifi</p>
            <p v-else>系统休眠期自动关闭wifi</p>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[5].istrue" min-width="140" align="center" prop="create_time" label="创建时间">
          <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
        </el-table-column>
        <el-table-column min-width="150" align="center" prop="log" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button size="mini" type="primary" @click="openEdit(scope.row)">编辑</el-button>
              <el-button size="mini" @click="toDelData(scope.row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination background :current-page.sync="listQuery.startSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="listQuery.pageSize">
        </el-pagination>
      </div>
      <!-- 删除弹窗 -->
      <delete-Dialog title="" :visible.sync="deleteDialogs.show" width="25%" top="40vh" @deleteEvents="deleteEvents" :deleteText="deleteDialogs.deleteText" />
    </div>

    <el-dialog title="系统休眠期wifi开关设置" :visible.sync="logShow" width="40%" :close-on-click-modal="false" :close-on-press-escape="false" @close="redactFormclose">
      <el-form :model="addForm" ref="ruleForm" :rules="rules">
        <el-form-item label="产品型号:" label-width="100px"  prop="name_code">
          <el-select v-model="addForm.sn_three_four" placeholder="请选择" filterable>
            <el-option
              v-for="item in nameCodeOptions"
              :key="item.name_code"
              :label="item.name"
              :value="item.name_code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批次:" label-width="100px" prop="batch">
          <el-select v-model="addForm.batch"  multiple filterable placeholder="请选择批次">
            <el-option
              v-for="item in batchArr"
              :key="item.id"
              :label="item.batch"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="休眠期wifi状态:"  label-width="120px" prop="status">
          <el-radio-group v-model="addForm.status">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="-1">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="10px">
          <i style="color: #F56C6C">(注: 建议熄屏期间关闭wifi 以延长电池续航)</i><br>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logShow  = false" size="mini" round>取 消</el-button>
        <el-button v-if="compileBtn" type="primary" size="mini" round @click="getAddScreenWifiStatus('ruleForm')">添加</el-button>
        <el-button v-else type="primary" size="mini" round @click="getEditSimControl('ruleForm')">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import dynamicTable from "@/components/DynamicTable";
  import objectable from "@/utils/objectable.js";
  import { getBatchTwo } from "@/api/equipment.js";
  import deleteDialog from "@/components/deleteDialog";
  import {getNameCode} from "@/api/appUpdate";
  import {
    addScreenWifiStatus,
    delScreenWifiStatus,
    editScreenWifiStatus,
    getScreenWifiStatus,
  } from "@/api/customMade";
  export default {
    components: { dynamicTable, deleteDialog },
    data() {
      return {
        checkboxVal: ['ID', '归属', '型号', '分发批次', '设定', '创建时间'],
        key: 1,
        colData: [], //动态控制table
        total: 0,
        searchInput: "",
        select: "1", //搜索条件
        //归属table
        tableData: [],
        logShow: false,
        listQuery: { userId: localStorage.getItem("ID"), startSize: 1, pageSize: 10, username: undefined, nameCode: '', batch: '' },
        batchData: [],
        addForm: { batch: [], sn_three_four: '', status: -1},
        rules: {
          batch: [{ required: true, message: "请选择批次", trigger: "blur" }],
          sn_three_four: [{ required: true, message: "请选择型号", trigger: "blur" }],
          status: [{ required: true, message: "请选择休眠期wifi状态", trigger: "blur" }],
        },
        deleteDialogs: { show: false, deleteText: '', deleteId: 0 },
        compileBtn: false,
        nameCodeOptions: [],
        batchArr: [],
      }
    },
    created() {
      this.colData = objectable(this.checkboxVal, this.checkboxVal); //转为数组对象，好控制table
      this.queryScreenWifiStatus()
      this.getBatchTwos()
      this.getNameCode();
      this.getBatchTwo()
    },
    methods: {
      //删除
      toDelData(id) {
        this.deleteDialogs.show = true
        this.deleteDialogs.deleteId = id
      },
      //删除按钮事件
      deleteEvents() {
        let params = { userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip"), id: this.deleteDialogs.deleteId }
        delScreenWifiStatus(params).then(res => {
          this.$message.success(res.msg)
          this.queryScreenWifiStatus()
        })
      },
      //获取型号名称
      getNameCode() {
        getNameCode({userId: localStorage.getItem("id")}).then(res => {
          this.nameCodeOptions = res.data.nameCode
          this.fifthOptions = res.data.fifth
        }).catch(err => {
          this.nameCodeOptions = []
          this.fifthOptions = []
        })
      },
      getBatchTwo() {
        getBatchTwo({ userId: localStorage.getItem("ID") }).then(res => {
          this.batchArr = res.data
        }).catch(err => {
          this.batchArr = []
        })
      },
      redactFormclose() {
        this.addForm = this.$options.data().addForm
      },
      openEdit(row){
        this.logShow = true
        this.compileBtn = false
        this.addForm  = {
          batch: row.batchArr,
          sn_three_four: row.sn_three_four,
          status: row.status,
          id: row.id
        }
      },
      getEditSimControl(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.addForm.userId = localStorage.getItem("ID")
            this.addForm.last_ip = sessionStorage.getItem("Ip")
            editScreenWifiStatus(this.addForm).then(res => {
              this.$message.success(res.msg)
              this.queryScreenWifiStatus()
              this.logShow = false
            }).catch(err => { })
          } else {
            return false
          }
        })
      },
      //添加按钮
      toAddData() {
        this.logShow = true
        this.compileBtn = true
      },
      getAddScreenWifiStatus(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.addForm.userId = localStorage.getItem("ID")
            this.addForm.last_ip = sessionStorage.getItem("Ip")
            addScreenWifiStatus(this.addForm).then(res => {
              this.$message.success(res.msg)
              this.queryScreenWifiStatus()
              this.logShow = false
            }).catch(err => { })
          } else {
            return false
          }
        })
      },
      //获取批次
      getBatchTwos() {
        getBatchTwo({ userId: localStorage.getItem("ID") }).then(res => {
          this.batchData = res.data
        }).catch(err => {
          this.batchData = []
        })
      },
      queryScreenWifiStatus(){
        getScreenWifiStatus(this.listQuery).then(res => {
          this.tableData = res.data
          this.total = res.total
        }).catch(err => {
          this.total = 0
          this.tableData = []
        })
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.queryScreenWifiStatus();
      },
      handleCurrentChange(val) {
        this.listQuery.startSize = val
        this.queryScreenWifiStatus();
      },
      Refresh() {
        this.listQuery = { userId: localStorage.getItem("ID"), startSize: 1, pageSize: 10, username: undefined }
        this.queryScreenWifiStatus()
      },
      idnameSearch() {
        if (!this.select) return this.$message.warning("请先选择查询条件");
        this.listQuery.startSize = 1
        this.listQuery.pageSize = 10
        switch (this.select) {
          case '1':
            this.listQuery.username = this.searchInput
            this.queryScreenWifiStatus();
            break;
          case '2':
            this.listQuery.nameCode = this.searchInput
            this.queryScreenWifiStatus();
            break;
          case '3':
            this.listQuery.batch = this.searchInput
            this.queryScreenWifiStatus();
            break;
        }
      },
      //下拉动态table子组件
      alterCheckbok(key, conte) {
        this.key = key;
        this.colData.filter(i => {
          if (conte.indexOf(i.title) != -1) {
            i.istrue = false;
            this.$nextTick(() => {
              this.$refs.tableDataRef.doLayout();
            });
          } else {
            i.istrue = true;
            this.$nextTick(() => {
              this.$refs.tableDataRef.doLayout();
            });
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .log {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  .content_left {
    background-color: #394350;
    height: 100%;
    color: #ffffff;
    .log-picture {
      padding: 20px;
      h2 {
        font-weight: 500;
      }
    }
    .upLogo {
      margin-top: 20px;
      .logo_Title {
        margin-right: 5px;
      }
      .upload-demo {
        position: relative;
        right: 10px;
      }
      .logo_upload {
        width: 75%;
        position: relative;
      }
      .logoBtn {
        text-align: center;
      }
    }
    .facility {
      text-align: center;
    }
    .picture {
      text-align: center;
      margin-top: 40px;
    }
    .logo_text {
      margin-top: 40px;
      display: flex;
      justify-content: center;
      span {
        display: inline-block;
        width: 250px;
        font-size: 14px;
        line-height: 25px;
        p {
          margin: 0;
          font-size: 16px;
          padding-bottom: 10px;
        }
      }
    }
    .download-log {
      margin-top: 40px;
      display: flex;
      justify-content: center;
      .download-template {
        width: 250px;
        a {
          background-color: #252e3c;
          height: 40px;
          display: block;
          line-height: 40px;
          width: 110px;
          text-align: center;
          color: #70a1e2;
        }
      }
    }
  }
  .logo_confirm {
    text-align: center;
    margin-top: 50px;
  }
  .content_right {
    text-align: center;
    background-color: #1f2731;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .default-img {
      // width: 419px;
      // height: 700px;
      img {
        width: 100%;
        height: 100%;
      }
      .zipTxt {
        color: #ffffff;
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
  .closeBtn {
    position: absolute;
    top: 10px;
    right: 20px;
  }
  .uplogoRule {
    cursor: pointer;
  }
</style>

<style scoped>
  /deep/ .el-progress__text {
    color: #fff;
  }
  /deep/ .el-button.is-round {
    border-radius: 4px;
  }
</style>
